<template>
  <div class="padding-20">
    <div class="personal-info">
      <div class="margin-btm-20 font-size-18">医院名称</div>
      <div class="flex flex-pack-justify">
        <div class="flex">
          <img src="../assets/images/profile.jpg"
               alt="">
          <div class="margin-left-20">
            <div class="font-size-18 margin-btm-10">早安，Ant Design，祝你开心每一天！（个人简介）</div>
            <div>连云港口腔医院－管理部－王佳丽</div>
          </div>
        </div>
        <div class="flex text-center">
          <div class="p-lr-20">
            <div class="margin-top-5 margin-btm-5">在线设备</div>
            <div class="font-size-24">{{DataWork.zxsb}}</div>
          </div>
          <div class="info-bor p-lr-20">
            <div class="margin-top-5 margin-btm-5">日处理量</div>
            <div class="font-size-24">{{DataWork.dayTotalHandle}}</div>
          </div>
          <div class="p-lr-20">
            <div class="margin-top-5 margin-btm-5">总处理量</div>
            <div class="font-size-24">{{DataWork.totalHandle}}</div>
          </div>
        </div>
      </div>
    </div>
    <div style="margin-top:20px">
      <el-row>
        <el-col :span="16"
                style="padding-right:20px">
          <el-card class="box-card">
            <div slot="header"
                 class="clearfix">
              <span>进行中的任务</span>
            </div>
            <div style="margin-top:16px;">
              <el-row>
                <el-col :span="6"
                        style="padding-right:16px">
                  <h4 style="margin-bottom:16px"><i class="el-icon-s-promotion"
                       style="color:rgb(64, 158, 255);margin-right:8px"></i>检测报告</h4>
                  <p style="color:rgb(133 128 128);margin-bottom:24px;font-size:12px;">请上传检测报告</p>
                  <p style="color:rgb(133 128 128);font-size:12px;">每个季度末结束，请勿超时</p>
                </el-col>
                <el-col :span="18"
                        style="border:1px solid #e6ebf5;padding:16px">
                  <el-form :model="queryParams"
                           ref="queryForm"
                           size="small"
                           :inline="true"
                           label-width="68px">
                    <el-form-item label="选择年份"
                                  prop="name">
                      <el-date-picker v-model="queryParams.year"
                                      type="year"
                                      placeholder="请选择年份"
                                      clearable
                                      value-format="yyyy"
                                      @change="workbenchReport(queryParams.year)"
                                      >
                      </el-date-picker>
                    </el-form-item>
                    <el-form-item>
                      <el-button type="primary"
                                 size="mini"
                                 @click="handleQuery">上传</el-button>
                    </el-form-item>
                  </el-form>
                  <el-table v-loading="loading"
                            :data="reportList">
                    <el-table-column label="序号"
                                     align="center"
                                     prop="id" />
                    <el-table-column label="年份"
                                     align="center"
                                     prop="yeayName"
                                     :show-overflow-tooltip="true" />
                    <el-table-column label="季度"
                                     align="center"
                                     prop="dateSection"
                                     :show-overflow-tooltip="true" />
                    <el-table-column label="时间"
                                     align="center"
                                     prop="createTime" />
                    <el-table-column label="是否上传成功"
                                     align="center"
                                     >
                             <template slot-scope="scope">
                                <i class="el-icon-success" style="color:green;" v-if="scope.row.status == 1"></i>
                                <i class="el-icon-error" v-else style="color:red;"></i>
                              </template>
                    </el-table-column>
                  </el-table>
                </el-col>
              </el-row>
            </div>
          </el-card>
        </el-col>
        <el-col :span="8" style="display:none;">
          <el-card class="box-card" style="max-height:400px; overflow-y:auto;">
            <div slot="header"
                 class="clearfix">
              <span>告警信息</span>
            </div>
            <div v-for="item in 10" style="margin-bottom:10px;">
              <el-card shadow="never">
                <div style="display:flex;justify-content:space-between">
                  <div>
                    <p style="margin-bottom:12px;font-size:14px">告警序号：123456</p>
                    <p style="margin-bottom:12px;font-size:14px">编号：123456</p>
                    <p style="font-size:14px">内容：123456</p>

                  </div>
                  <div style="width:40px;background:red;color:#fff;display: flex;align-items: center;justify-content: center;">高</div>

                </div>
                <div style="width:100%;height:1px;background:#e6ebf5;margin:16px 0 10px"></div>
                <p style="font-size:14px">2022.07.30 15:22:22</p>
              </el-card>
            </div>
          </el-card>
        </el-col>
      </el-row>
    </div>

  <!-- 上传对话框 -->
    <el-drawer title="上传检测报告"
               :visible.sync="upRepont"
               width="500px"
               append-to-body>
        <div style="padding:20px 40px;">
          <div style="display:flex;justify-content:space-between">
            <span style="font-size:16px; font-weight:700;">基本信息</span>
            <span style="font-size:12px; color:#666;">提示：过期不可上传，请按时上传。</span>
          </div>
          <div class="infor_list text-center">
            <div>
              年份
              <div class="sp">{{year}}</div>
            </div>
            <div>
              季度
              <div class="sp">{{currQuarter}}</div>
            </div>
            <div>
              剩余上传天数
              <div class="sp">{{dayCount}}</div>
            </div>
          </div>
          <el-divider></el-divider>
          <el-form ref="form"
                   :model="form"
                   label-width="80px">
            <el-form-item label="日期"
                          prop="serial">
              {{NowDate}}
            </el-form-item>
            <el-form-item label="上传文件"
                          prop="reportUrl">
              <el-upload
                v-if="trueUp"
                class="upload-demo"
                drag
                :http-request="updatereportUrl"
                action="#"
                accept=".jpg,.jpeg,.png,.gif,.bmp,.pdf,.JPG,.JPEG,.PBG,.GIF,.BMP,.PDF,.DOCX"
                >
                <i class="el-icon-upload"></i>
                <div class="el-upload__text">将文件拖到此处，或<em>点击上传</em></div>
                <div class="el-upload__tip" slot="tip">支持扩展名：docx .pdf .jpg...</div>
              </el-upload>
            </el-form-item>
          </el-form>
          <div
               class="dialog-footer" style="text-align:right;">
            <el-button type="primary"
                       @click="submitFormlistInstitution">确 定</el-button>
            <el-button @click="cancel">取 消</el-button>
          </div>
        </div>
    </el-drawer>
  </div>
</template>

<script>
import { warninglist } from "@/api/system/message";
import { prodReportList,addReport } from "@/api/system/report";
import { uploadAvatar } from "@/api/system/user";
import { workbenchList,workbenchReport } from "@/api/system/workbench";
import { listInstitution} from "@/api/system/institution";
export default {
  name: "workbench",
  components: {},
  data() {
    return {
      trueUp:false,
      year:null,
      NowDate:null,
      dayCount:null,
      currQuarter:null,
      DataWork:{},
      reportList:[],
      upRepont:false,
      loading: false,
      configList: [],
      total:0,
      form:{},
      queryParams: {
        pageNum: 1,
        pageSize: 10,
      }
    }
  },
  mounted() {
    this.workbenchList()
  },
  methods: {
    //确定添加检测信息
    submitFormlistInstitution(){
      addReport({institutionId:'09874563214567891',reportUrl:this.form.reportUrl,}).then(response => {
        this.$modal.msgSuccess("新增成功");
        this.upRepont = false;
        this.workbenchReport();
        this.trueUp = false
      });
    },
    //取消添加检测信息
    cancel(){
      this.upRepont = false
      this.trueUp = false
    },
    getNowDate() {
      const timeOne = new Date()
      const year = timeOne.getFullYear()
      let month = timeOne.getMonth() + 1
      let day = timeOne.getDate()
      month = month < 10 ? '0' + month : month
      day = day < 10 ? '0' + day : day
      const NOW_MONTHS_AGO = `${year}-${month}-${day}`
      const currQuarter = Math.floor((month % 3 === 0 ? (month / 3) : (month / 3 + 1)))
      let monthArr = [this.year+'-3-31',this.year+'-6-30',this.year+'-9-30',this.year+'-12-31']
      let dayHas = new Date(monthArr[currQuarter-1]).getTime() - new Date(NOW_MONTHS_AGO).getTime();//日期转时间戳
      let dayCount = Math.floor(dayHas / 86400000) ;
      return {
        NOW_MONTHS_AGO:NOW_MONTHS_AGO,
        currQuarter:currQuarter,
        dayCount:dayCount
      }
    },
    //年份筛选
    workbenchReport( query){
      this.year = query
      workbenchReport({year:query}).then((res) => {
         this.reportList = res.data
      })
    },
    // 上传文件
    updatereportUrl(params, type) {
      let file = params.file
      let vm = this;
      const formdata = new FormData();
      formdata.append("avatarfile", file);
      uploadAvatar(formdata).then(response => {
        this.form.reportUrl = response.imgUrl;
      });
    },
    prodReportList() {
      this.loading = true;
      prodReportList(this.queryParams).then((res) => {
        this.configList = response.rows;
        this.total = response.total;
        this.loading = false;
      })
    },
    handleQuery() {
      this.upRepont = true
      this.NowDate = this.getNowDate().NOW_MONTHS_AGO
      this.currQuarter = this.getNowDate().currQuarter
      this.dayCount = this.getNowDate().dayCount
      this.form.reportUrl = null
      this.trueUp = true
    },
    workbenchList(){
      workbenchList().then((res) => {
         this.DataWork = res.data
      })
    }
  }
}
</script>

<style lang="scss" scoped>
.personal-info {
  padding-bottom: 20px;
  border-bottom: 1px solid #dddddd;
  img {
    width: 60px;
    border-radius: 50%;
  }

  .info-bor {
    border-left: 1px solid #dddddd;
    border-right: 1px solid #dddddd;
  }
}
.infor_list{
  display:flex;
  justify-content:space-between;
  margin-top:20px;
  div.sp{
    font-size:20px; 
    font-weight:700;
    color:#555;
    padding-top:7px;
  }
}
</style>
